<template>
  <div class="payFee_save">
    <el-row class="table_search">
      <el-col :span="24">
        <template>
          <el-select v-model="value" placeholder="请选择机构">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-input style="margin-left: 20px"
                    placeholder="请输入用户姓名进行搜索"
                    v-model="inputVar"
                    clearable>
          </el-input>
          <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
        </template>
      </el-col>
    </el-row>

    <el-row class="table_btn">
      <el-col :span="24" class="text-r">
        <el-button type="danger" icon="el-icon-plus" @click="goAddPayFee" style="margin-left: 20px">新增人员</el-button>
        <el-button type="danger" icon="el-icon-plus" style="margin-left: 20px">批量新增</el-button>
        <el-button type="danger" icon="el-icon-plus" style="margin-left: 20px">导出</el-button>
      </el-col>
    </el-row>

    <template>
      <el-table
        size="mini"
        :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
        @row-click="goPayFeeDetails"
        @cell-mouse-enter="mouseEnterEvent"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="num"
          label="缴费编号"
          width="170">
        </el-table-column>
        <el-table-column
          align="center"
          prop="name"
          label="用户姓名"
          width="170">
        </el-table-column>
        <el-table-column
          align="center"
          width="170"
          prop="contact"
          label="联系方式">
        </el-table-column>
        <el-table-column
          align="center"
          width="170"
          prop="firstAgencies"
          label="一级机构">
        </el-table-column>
        <el-table-column
          align="center"
          width="170"
          prop="secondAgencies"
          label="二级机构">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="primary"  size="mini" @click="goPayFeeEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button type="danger"  size="mini" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页-->
      <div class="block footerBox">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next, jumper"
          :total="tableData.length">
        </el-pagination>
      </div>
    </template>

  </div>
</template>

<script>

  export default {
    data: function (){
      return {
        isPointer:'cursor:pointer',
        options: [
          {
            value: '选项1',
            label: '黄金糕'
          }
          ,
          {
            value: '选项2',
            label: '双皮奶'
          },
          {
            value: '选项3',
            label: '蚵仔煎'
          },
          {
            value: '选项4',
            label: '龙须面'
          },
          {
            value: '选项5',
            label: '北京烤鸭'
          }],
        value: '',
        input10: '',
        inputVar: '',
        tableData: [
          {
            num:1,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:3,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:1,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          },
          {
            num:12,
            contact: 182192292929,
            name: '王小虎',
            firstAgencies: '山东省税务居',
            secondAgencies: '火箭班'
          }
        ],
        currentPage: 1,
        pageSize:10
      }
    },
    methods: {
      handleSizeChange: function (size) {
        this.pageSize = size;
      },
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
      },
      /**
       * 点击一行跳转到当期行的详情页
       * **/
      goPayFeeDetails(row, event, column){

        if(column.label != '操作'){
          this.$router.push({path:'/payFee_save/payFee_details',query:{row:row}});
        }
        if(column.label == '操作'){
            return
        }

      },
      /**
       * 鼠标
       * @param row
       * @param event
       * @param column
       */
      mouseEnterEvent(row, event, column){
          if(event.label == '操作'){
          column.style.cursor="default"
        }
        if(event.label != '操作'){
          column.style.cursor="pointer"
        }
      },
      deleteRow(index, row) {
        var that = this;
        var indexing1 = index;
        this.$confirm('确认删除此角色吗？','提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          that.tableData.splice(indexing1, 1)
          that.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(function () {
          that.$message({
            type: 'info',
            message: '已取消删除'
          });
        })

      },
      searchFun(){
        //请求接口返回数据
      },
      goAddPayFee(){
          this.$router.push({path:'/payFee_save/add_payFee_people'})
      },
      goPayFeeEdit(index,row){
        this.$router.push({path:'/payFee_save/payFee_edit',query:{id:row}});
      }
    }
  }
</script>

<style scoped>
  .table_search, .table_btn{
    height: 60px;
    margin-bottom: 10px;
    background: #fff;
    padding: 10px 20px 30px;
  }
  .el-input{
    width: auto;
  }
  .text-r{
    text-align: right;
  }
  .footerBox {
    width: 100%;
    height: 50px;
    background-color: #fff;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 9px;
    text-align: right;
  }
</style>
